<template>
  <div>
    <header class="mui-bar mui-bar-nav bg-color" style="z-index:999;p">
      <span  class="iconfont icon-fanhui header_fanhui" @tap="switchUserInfoStatus"></span> 
      <span class="mui-icon mui-icon-search mui-pull-left header_search" style="display: none;"></span> 
      <h1 class="mui-title">身份信息</h1> 
      <span class="header-right" @tap="save">保存</span>
    </header>
    <div class="userInfo" style="margin-top:44px;">
      <form id="user_info_form">
        <ul class="mui-table-view mui-table-view-chevron clause">
          <li style="margin: 0px 0px 0px 15px;" class="input-after">
            <div  class="mui-input-row">
              <label >姓名</label> 
              <input  maxlength="20" type="text" name ="name" v-model="userInfo.name" class="mui-input-clear" style="padding: 8px 0px 10px; font-size: 0.7rem;">
              <error v-show="validated_status.name"></error>
            </div>
          </li>
          <li style="margin: 0px 0px 0px 15px;" class="input-after">
            <div  class="mui-input-row">
              <label >注册电话</label> 
              <input  maxlength="20" type="text" name ="mobile" v-model="userInfo.mobile" readonly="readonly" class="mui-input-clear" style="padding: 8px 0px 10px; font-size: 0.7rem;">
              <error v-show="validated_status.mobile"></error>
            </div>
          </li>
          <li style="margin: 0px 0px 0px 15px;" class="input-after">
            <div  class="mui-input-row">
              <label >联系电话</label> 
              <input  maxlength="20" type="text" name ="tel" v-model="userInfo.tel" class="mui-input-clear" style="padding: 8px 0px 10px; font-size: 0.7rem;">
              <error v-show="validated_status.mobile"></error>
            </div>
          </li>
          <li style="margin: 0px 0px 0px 15px;" class="input-after">
            <div  class="mui-input-row">
              <label >身份证号</label> 
              <input  maxlength="18" type="text" name ="idCard" v-model="userInfo.idCard"  class="mui-input-clear" style="padding: 8px 0px 10px; font-size: 0.7rem;">
              <error v-show="validated_status.idCard"></error>
            </div>
          </li>
          <li  class="mui-table-view-cell" @tap="showCityPickerButton">
            <a class="mui-navigate-right">
              <span class="usertit">所在地区</span> 
              <span style="padding-left:10px" v-if="userInfo.area">{{userInfo.area}}</span>
              <span v-else class="userpams">请选择</span>
            </a>
          </li>
          <li style="margin: 0px 10px 0px 15px;">
            <div  class="mui-input-row">
              <label >详细地址</label> 
              <textarea   v-model="userInfo.address"  maxlength="50" name ="address" type="text" placeholder="请输入详细地址信息，如道路，门牌号，小区，楼栋号，单元室等(不能超过50字符)" class="mui-input-clear" style="padding: 8px 0px 10px; font-size: 0.7rem;">
              </textarea>
              <span v-show="validated_status.address" style="position:absolute;right:0px;top:30px;" class="mint-field-state is-error">
                <i class="mintui mintui-field-error"></i>
              </span>
            </div>
          </li>
        </ul>
      </form>
    </div>
  </div>
</template>

<script>
import mui from "static/js/mui";
import CrossLine from "@/components/base/cross-line/cross-line";
import Error from "@/components/base/form-status/error";
import {updateCustomerMessage} from '@/api/user';
import { validated, validatedError }from '@/utils/validator'
import { Toast } from 'mint-ui'
import storage from "@/utils/localstorage"
import "static/js/mui.picker.js";
import "static/js/mui.poppicker.js";
import "static/js/mui.dtpicker.js";
export default {
  data() {
    return {
      cityPicker3: "",
      dtpicker: "",
      userInfo:{
        modile:"",
        tel: "",
        name:"",
        idCard:"",
        address: "江苏省无锡市锡山区",
      },
      data_options: {
        type: "date",
        beginYear: 1949,
        endYear: 2016
      },
      user_info_option:[
        {
          name: 'name',
          display:"姓名必填|姓名太长|姓名太短",
          rules: 'required|max_length(20)|min_length(2)'
        },
        {
          name: 'tel',
          display:"你输入的不是合法手机号|手机号太长|手机号太短",
          rules: 'is_phone|max_length(20)|min_length(8)'
        },
        {
          name: 'idCard',
          display:"身份证号必填|身份证号太长|身份证号太短",
          rules: 'required|max_length(18)|min_length(18)'
        },
        {
          name: 'address',
          display:"地址必填|地址太长|地址太短",
          rules: 'required|max_length(50)|min_length(5)'
        }
      ],
      validated_status: {
        'name': null,
        'mobile': null,
        'idCard':'',
        'address':null,
      }
    };
  },
  components: {
    CrossLine, Error
  },
  props: {
    // 父组件传状态
    userInfoStatus: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    //子向父传参，记得第一个是方法
    switchUserInfoStatus() {
        this.$store.dispatch('updateNavbarStatus', { isShowHead: true, isShowFoot: false})
        this.$emit('user', storage.getLocalstorage('user'));
        this.$emit('userInfoStatus', !this.userInfoStatus);
    },
    alterName() {
      this.$router.push({
        path: "/alterName"
      });
    },
    alterSex() {
      this.$router.push({
        path: "/alterSex"
      });
    },
    alterBirthDate() {
      this.$router.push({
        path: "/alterBirthDate"
      });
    },
    alterCityAddress() {
      this.$router.push({
        path: "/alterCityAddress"
      });
    },
    showCityPickerButton() {
      let that = this;
      this.cityPicker3.show(function(items) {
        that.userInfo.area =
          (items[0] || {}).text + (items[1] || {}).text + (items[2] || {}).text;
      });
    },
    showDtpicker() {
      let that = this;
      this.dtpicker.show(function(items) {
        that.birthData =
          items.y.text + "年" + items.m.text + "月" + items.d.text + "日";
        //console.log(that.birthData);
      });
    },
    save() {
      // 验证处理,返回错误信息
      var errors = validated('user_info_form',this.user_info_option)
      // //console.log(errors)
      // 根据错误生成input状态
      validatedError(errors ,this.validated_status)
      if(errors.length == 0){
        updateCustomerMessage(this.userInfo).then(response => {
          storage.setLocalstorage('user',response.data)
          this.$store.commit('SET_USER',response.data)
          Toast('保存成功')
          this.switchUserInfoStatus()
        })
      }
    },
  },
  filters: {},
  computed: {},
  created() {
    this.userInfo = storage.getLocalstorage('user')
  },
  mounted() {
    //地址
    this.cityPicker3 = new mui.PopPicker({
      layer: 3
    });
    this.cityPicker3.setData(this.$store.state.appData.cityData3);

    // 日期
    this.dtpicker = new mui.DtPicker(this.data_options);
  }
};
</script>

<style lang="scss" scoped>
@import "~static/css/mui.picker.min.css";
/* .userInfo{
  margin-top:44px;
} */
//地址
.icon-dingw{
  display: inline-block;
  font-size:20px;
  position: relative;
  top:-6px;
}
.address-info{
  display: inline-block;
  margin-left:10px;
}
.mui-table-view-cell:last-child:after {
    height: 0;
}
.mui-input-row label {
    font-family: 'Helvetica Neue', Helvetica, sans-serif;
    line-height: 1.1;
    float: left;
    width: 20%;
    padding: 12px 0px 10px 0px;
    font-size: 0.7rem;
}
.mui-input-row label ~ input {
    float: right;
    width: 80%;
    margin-bottom: 0;
    padding-left: 0;
    border: 0;
}
.mui-input-row label ~ textarea {
    float: right;
    width: 80%;
    height:100px;
    margin-bottom: 0;
    padding-left: 0;
    border: 0;
}
.mui-table-view-cell a span{
  font-size:0.7rem;
}
.userpams{
  float: right;
  position: relative;
  right:-35px;
  color:#999999;
  top:1px;
}
.input-after{
  border-bottom: 0.5px solid #f0f0f0;
}
.mui-table-view-cell:after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 15px;
    height: 1px;
    content: '';
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    background-color: #f0f0f0;
}
// header
.mui-bar {
  z-index:2;
  background-color: #fff;
  -webkit-box-shadow:none;
  box-shadow:none;
  border-bottom:1px solid #ddd;
}

.mui-bar-tab .mui-tab-item {
    height:60px;
}
.mint-tab-item-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 5px
}
.header_fanhui {
  line-height: 43px;
  font-size: 0.9rem;
}

.header-right {
  line-height: 44px;
  height: 44px;
  width:44px;
  padding-top: 0px!important;
  text-align: right;
  float: right;
  font-size:13px;
  color:#333;
}

.bg-color {
  box-shadow: 0 0px 0px !important;
}
</style>